<template>
	<view class="all">
		<view class="top">
			<image class="back" src="@/static/back.png" mode="scaleToFill" @click="back"></image>
			<text class="text">
				{{text}}
			</text>
		</view>
		<view class="main">
			<view class="input">
				<image class="kuo" src="@/static/kuo.png" mode="scaleToFill"></image>
				<input class="inputs" type="text" placeholder="搜索" />
			</view>
			<view class="list" @click="list">
				<text class="item"></text>
				<text class="item"></text>
				<text class="item"></text>
			</view>
			 <view class="uni-list" v-show="listShow">
			            <radio-group @click="every" class="all" @change="radioChange">
			                <label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
			                    <view class="check">
			                        <radio class="radio" :value="item.value" :checked="index === current" />
			                    </view>
			                    <view class="text">{{item.name}}</view>
			                </label>
			            </radio-group>
			        </view>
		</view>
		<view class="artitle">
			<view class="no">
				<view class="left">
					风墙名称：
					<text class="right">
						名称
					</text>
				</view>
				<view class="left">
					风墙编号：
					<text class="right">
						JDS47858
					</text>
				</view>
				<view class="left">
					瓦斯：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					CO:
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					氧气：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					温度：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					漏风量：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					通讯：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					时间：
					<text class="right">
						2020-02-02 10:00
					</text>
				</view>
			</view>
			<view class="no1" v-show="isShow">
				<view class="left">
					风墙名称：
					<text class="right">
						名称
					</text>
				</view>
				<view class="left">
					风墙编号：
					<text class="right">
						JDS47858
					</text>
				</view>
				<view class="left">
					瓦斯：
					<text class="right">
						0m³/min
					</text>
				</view>
				<view class="left">
					CO:
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					氧气：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					温度：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					漏风量：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					通讯：
					<text class="right">
						数值内容
					</text>
				</view>
				<view class="left">
					时间：
					<text class="right">
						2020-02-02 10:00
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: "设备详情",
				isShow: true,
			 items: [{
			                    value: '1',
			                    name: '风墙名称'
			                },
			                {
			                    value: '2',
			                    name: '风墙编号',
			                    checked: 'true'
			                },
			                {
			                    value: '3',
			                    name: '瓦斯'
			                },
			                {
			                    value: '4',
			                    name: 'CO'
			                },
			                {
			                    value: '5',
			                    name: '氧气'
			                },
			                {
			                    value: '6',
			                    name: '温度'
			                },
							{
							    value: '7',
							    name: '漏风量'
							},
							{
							    value: '8',
							    name: '通讯'
							},
							{
							    value: '9',
							    name: '时间'
							},
			            ],
			            current: 0,
						listShow:false
			}
		},
		methods: {
			list(){
				this.listShow=!this.listShow
			},
			every(){
				var self = this; 
				setTimeout(function () {
				    // clearTimeout(timeoutId);
					console.log(this.listShow)
                    self.listShow=false
				}, 200);
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			add() {
				uni.navigateTo({
					url: '../addInfo/addInfo'
				});
			},
			goInfoInfo() {
				uni.navigateTo({
					url: '../infoInInfo/infoInInfo'
				});
			},
		     radioChange: function(evt) {
				 console.log(evt)
		            for (let i = 0; i < this.items.length; i++) {
		                if (this.items[i].value === evt.target.value) {
		                    this.current = i;
		                    break;
		                }
		            }
		        }
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// width: 100px;
		height: 100%;
		background-color: rgb(247, 247, 247);
	}

	.top {
		width: 100%;
		background-color: white;
		height: 100rpx;
		position: relative;

		.text {
			width: 186rpx;
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: rgba(51, 51, 51, 1);
			letter-spacing: 5.100000381469727px;
			opacity: 1;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -93rpx;
			margin-top: -25rpx;
		}

		.back {
			width: 20rpx;
			height: 36rpx;
			position: absolute;
			left: 40rpx;
			top: 26rpx;
		}

		.add {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 5%;
			top: 50rpx;

		}

	}

	.main {
		// background-color: skyblue;
		width: 90%;
		// height: 900rpx;
		margin: 0 auto;
		position: relative;

		.input {
			width: 85%;
			height: 64rpx;
			background-color: white;
			// border: 1rpx solid gray;
			border-radius: 50rpx;
			position: absolute;
			top: 30rpx;
			left: 5rpx;
			display: flex;

			.kuo {
				width: 40rpx;
				height: 40rpx;
				margin-top: 10rpx;
				margin-left: 15rpx;
			}

			.inputs {
				flex: 1;
				margin-top: 15rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}

		.list {
			width: 70rpx;
			height: 70rpx;
			background-color: white;
			position: absolute;
			right: -10rpx;
			top: 30rpx;
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;

			.item {
				display: block;
				width: 8rpx;
				height: 8rpx;
				background-color: rgb(1, 89, 183);
				border-radius: 50%;
				line-height: 74rpx;

			}
		}
		.uni-list{
			width: 280rpx;
			height: 687rpx;
			background-image: url('~@/static/list.png');
			position: absolute;
			right: 0rpx;
			top: 90rpx;
			background-size: 100%;
			.all{
				margin-top: 30rpx;
			}
			
			.uni-list-cell{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			height: 50rpx;
			margin-top: 20rpx;
				.check{
					width: 18rpx;
					height: 18rpx;
					margin-left: 12rpx;
				   margin-top: 10rpx;
				}
				/deep/.radio .uni-radio-input{
					width: 35rpx;
					height: 35rpx;
				}
			
			
				.text{
					width:188rpx;
					height:63rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:400;
					line-height:83rpx;
					color:rgba(255,255,255,1);
					opacity:1;
					text-align: left;
					border-bottom: 1px solid rgb(102, 102, 102);
				
				}
			}
		}
	}

	.artitle {
		width: 95%;
		margin-top: 135rpx;
		margin-right: auto;
		margin-left: auto;

		.no {
			width: 95%;
			display: flex;
			margin-right: auto;
			margin-left: auto;
			background-color: white;
			flex-direction: column;
			justify-content: space-around;

			.left {
				width: 100%;
				height: 57rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 57rpx;
				color: rgba(153, 153, 153, 1);
				opacity: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.right {
				width: 266rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;

			}
		}

		.no1 {
			width: 95%;
			// height: 240rpx;
			background-color: white;
			margin-top: 35rpx;
			margin-right: auto;
			margin-left: auto;
			border-radius: 4%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;


			.left {
				width: 100%;
				height: 57rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 57rpx;
				color: rgba(153, 153, 153, 1);
				opacity: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.right {
				width: 266rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;

			}

		}
	}

</style>
